<template>
  <el-row :gutter="20" class="bigxy">
    <el-col :span="6"
      ><div class="grid-content bg-purple">
        <div class="demo-input-suffix">
          <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="搜索"
            :prefix-icon="Search"
          />
        </div>
        <div class="leftbottomxy">
          <el-scrollbar height="100%">
            <div v-for="item in 20" :key="item" class="scrollbar-demo-item">
              <div><span>假装有图片</span></div>
              <div>
                <p>杭州"新规划"项目开发负责人交流小组</p>
                <p>(20)人</p>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-col>
    <el-col :span="12"
      ><div class="grid-content bg-purple centerxy">
        <p>杭州"新规划"项目开发负责人交流小组(20人)</p>
        <div>
          <el-scrollbar v-if="Names.length">
            <div
              v-for="(item, index) in Names"
              :key="index"
              class="scrollbar-demo-item"
            >
              <div>
                <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
              </div>
              <div>
                <p>{{ item.Name }}</p>
                <span>{{ item.text }}</span>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div>
          <p>
            <el-icon :size="25"><picture-rounded /></el-icon>
            <el-icon :size="25"><folder-opened /></el-icon>
            <el-icon :size="25"><paperclip /></el-icon>
          </p>
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            @keydown.enter="Liaotianxy"
          ></textarea>
        </div></div
    ></el-col>
    <el-col :span="6"
      ><div class="grid-content bg-purple rigthxy">
        <div class="rightinnerxy">
          <div class="secondinputxy">
            <span>
              <el-input
                v-model="input1"
                class="w-50 m-2"
                placeholder="搜索小组成员"
                :prefix-icon="Search"
              />
            </span>
            <span>
              <el-icon><plus /></el-icon>
              <el-icon><semi-select /></el-icon>
            </span>
          </div>
          <div class="contactsxy">
            <el-scrollbar height="100%">
              <div v-for="item in 20" :key="item" class="scrollbar-demo-item">
                <div><span>假装有头像</span></div>
                <div>
                  <p>王妮妮</p>
                  <p>光明公司管理部总监</p>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="contactsbtnxy">
            <el-button round>显示全部</el-button>
          </div>
          <div class="rightbottomxy">
            <p>小组名称</p>
            <textarea>杭州“新规划”项目开发负责人交流小组</textarea>
            <p>小组公告</p>
            <textarea>为开拓新市场xxxxxxxx</textarea>
            <p>文件共享</p>
            <div>
              <p>
                <span>文件</span>
                <span>文件大小</span>
              </p>
            </div>
          </div>
        </div>
      </div></el-col
    >
  </el-row>
</template>

<script>
import { ref, onMounted } from "vue";
import {
  ElRow,
  ElCol,
  ElInput,
  ElScrollbar,
  ElIcon,
  ElButton,
  ElAvatar,
} from "element-plus";
import {
  Calendar,
  Search,
  PictureRounded,
  Paperclip,
  FolderOpened,
  Plus,
  SemiSelect,
  Edit,
} from "@element-plus/icons-vue";
import Mock from "mockjs";
let data = Mock.mock({
  "data|2": [
    {
      Name: "@ctitle(3)",
      "text|15-20": "@ctitle(2)",
    },
  ],
});
export default {
  setup() {
    const input1 = ref("");
    const input2 = ref("");
    const Names = ref([]);
    const Liaotianxy = (e) => {
      var value = e.currentTarget.value;
      Names.value.push({ Name: "金凯瑞", text: value });
      e.currentTarget.value = "";
    };
    onMounted(() => {
      Names.value = data.data;
    });

    return { input1, input2, Calendar, Search, Edit, Names, Liaotianxy };
  },

  components: {
    ElRow,
    ElCol,
    ElInput,
    ElScrollbar,
    ElIcon,
    PictureRounded,
    Paperclip,
    FolderOpened,
    Plus,
    SemiSelect,
    ElButton,
    ElAvatar,
  },
};

// 取消默认回车事件
document.onkeydown = function (e) {
  //捕捉回车事件
  var ev = typeof event != "undefined" ? window.event : e;
  if (ev.keyCode == 13 || event.which == 13) {
    return false;
  }
};
</script>

<style lang="less" scoped>
// .el-row {
//   margin-bottom: 20px;
// }
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  height: 660px;
}
.bg-purple {
  background: #fff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 100%;
}
.row-bg {
  background-color: #f9fafc;
}
// 左边盒子
.bigxy{
  .el-input{
    width:100% ;
  /deep/.el-icon{
      color: black;
      font-size: 20px;
    }
  /deep/.el-input__inner{
    background: #f2f2f2;
    border: none;
    }
  }
  .grid-content{
    padding: 20px 20px 0px 20px;
  }
.leftbottomxy{
  width: 100%;
  height: calc(100% - 72px);
  background: #f2f2f2;
  margin-top: 20px;
  padding-top: 15px;
  border-radius: 4px;
   .scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  text-align: center;
  border-radius: 4px;
   }
  .scrollbar-demo-item>div:nth-of-type(1){
    height: 100%;
    width: 30%;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .scrollbar-demo-item>div:nth-of-type(1) span {
    display: block;
    width: 65%;
    height: 90%;
    border-radius: 10%;
    background: lightcoral;
  }
  .scrollbar-demo-item>div:nth-of-type(2){
    height: 100%;
    width: 70%;
    font-size: 10px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-around;
    p{
      width:100%;
      white-space:nowrap;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
    }
    p:nth-of-type(2){
      padding-left: 10px;
    }
  }
 }
}
// 中间盒子
.centerxy{
  p{
    height: 30px;
    font-size: 18px;
  }
 >div:nth-of-type(1){
   height: calc(70% - 25px);
   border-radius: 2%;
    background: #f2f2f2;
    .el-scrollbar{
      height: 100%;
      .scrollbar-demo-item {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 80px;
     margin:0 10px 10px 10px;
      div:nth-of-type(1){
        width: 12%;
        height: 100%;
       /deep/ span{
          width:70%;
          height: 60%;
        }
      }
      div:nth-of-type(2){
        width: 88%;
        height: 100%;
        padding-right: 10px;
        p{
          height: 20px;
          font-size: 14px;
          margin-top:10px;
        }
        span{
          padding: 5px 10px;
          display: block;
          width: 100%;
          height: calc(100% - 40px);
          background: #fff;
        }
      }
     }
    }
  }
 >div:nth-of-type(2){
    height: calc(30% - 25px);
    padding: 10px;
    .el-icon{
      margin: 0 10px;
    }
  textarea{
      height: calc(100% - 30px);
      width: 100%;
      border: none;
      font-size: 14px;
      padding-top: 10px;
    }
  }
}
// 右边盒子
.bigxy .rigthxy{
  background: #fff;
  padding: 15px;
  .rightinnerxy{
   padding: 10px;
   height: 100%;
   background: #f2f2f2;
  }
 /deep/.secondinputxy{
  width: 100%;
  display: flex;
  height: 25px;
 .el-input{
   height: 100%;
    .el-input__inner{
      height: 100%;
      background: #fff;
    }
  }
  span:nth-of-type(2){
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 10px;
    width: 30%;
    .el-icon {
      width: 40%;
      height: 90%;
      background: #fff;
      border-radius: 10%;
      svg{
      width: 70%;
      height: 60%;
    }
    }
  }
 }

 .contactsxy{
   width: 100%;
  height: 40%;
  padding-top: 15px;
  border-radius: 4px;
   .scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  text-align: center;
  border-radius: 4px;
   }
  .scrollbar-demo-item>div:nth-of-type(1){
    height: 100%;
    width: 30%;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .scrollbar-demo-item>div:nth-of-type(1) span {
    display: block;
    width: 50%;
    height: 90%;
    background: lightcoral;
  }
  .scrollbar-demo-item>div:nth-of-type(2){
    height: 100%;
    width: 70%;
    font-size: 10px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-around;
    p{
      width:100%;
      white-space:nowrap;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
    }
  }
 }
 .contactsbtnxy{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    box-sizing: border-box;
    padding-bottom: 10px;
    border-bottom: 2px #fff solid;
      .el-button {
          height: 20px;
          font-size: 10px;
          color: skyblue;
          text-decoration: underline;
      }
  }
  .rightbottomxy{
    width: 100%;
    margin-top:10px;
    height: 200px;
    textarea{
      padding: 5px;
      border:none;
      width: 100%;
      color: grey;
    }
    textarea:nth-of-type(2){
      height: 80px;
    }
    p{
      margin: 5px 0;
    }
    div{
      width: 100%;
      height: 100px;
      background: #fff;
      padding: 10px;
      p{
        background: #f2f2f2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 25px;
        padding: 0 10px 0 5px;
      }
    }
  }
}
</style>
